<template>
	<view>
		<view class="content" :style="'padding-top:'+(statusBarHeight1*1+105*1)+'px'">
			<view class="navtop" :style="'padding-top:'+statusBarHeight1+'px'">
				<view class="secon">
					<image src="/static/stLine.png" mode="widthFix"></image>
					<input type="text" v-model="like" @confirm="serbtn" placeholder="搜索关键词/订单号" />
				</view>
				<scroll-view scroll-x="true" class="navtap">
					<view class="txt1" @tap="swidths(0)"><span :class="cur==0?'actives':''">全部</span></view>
					<view class="txt1" @tap="swidths(1)"><span :class="cur==1?'actives':''">待付款</span></view>
					<view class="txt1" @tap="swidths(2)"><span :class="cur==2?'actives':''">待使用</span></view>
					<view class="txt1" @tap="swidths(3)"><span :class="cur==3?'actives':''">待评价</span></view>
					<view class="txt1" @tap="swidths(4)"><span :class="cur==4?'actives':''">退款</span></view>
				</scroll-view>
			</view>
		</view>
		<view class="list" v-for="(item,index) in list" :key="index">
			<view>
				<view class="txt2">
					<view><span v-if="item.user">下单人：<span>{{item.user.name}}</span></span></view>
					<view>{{item.refund_status>0?return_types[item.refund_status]:pay_types[item.status]}}</view>
				</view>
				<view class="cplist">
					<view>
						<image :src="imgoss+item.goods.pic" mode="aspectFill" class="zrimg"></image>
						<view>
							<view>{{item.goods.name}}</view>
							<view>{{item.goods.time}}</view>
							<view>
								<view><span>￥</span>{{item.goods.money}}</view>
								<view>x{{item.number}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="forbtn">
				<view>
					<view class="btn1" v-if="item.refund_status==0&&item.status==2" @tap="jump('/subcontract/shop/confirmCode')">确认券码</view>
				</view>
			</view>
		</view>
		<view class="morder" v-if="more==1">没有更多数据</view>
		<view class="bottombtn" @tap="jump('/subcontract/shop/confirmCode')">快捷核销</view>
	</view>
</template>
<script>
	const app = getApp();
	var util = require('../../utils/util.js');
	export default {
		data() {
			return {
				imgoss: app.globalData.imgoss,
				statusBarHeight: getApp().globalData.statusBarHeight,
				statusBarHeight1: getApp().globalData.statusBarHeight1,
				show: false,
				show1: false,
				bacolor: '#ffffff',
				loginshow: false,
				img_src: app.globalData.img_src,
				img_url: app.globalData.img_urls,
				cur: 0,
				list: [],
				page: 0,
				more: false,
				return_txt: '',
				id: '',
				idx: '',
				like: '',
			    pay_types:['','待付款', '待使用', '待评价', '已取消', '已退款', '已评价'],
			    return_types:['', '已提交申请', '已退款', '退款驳回'],

			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var that = this;
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {

		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			var that = this;
			this.orderList()
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			this.page = 0;
			uni.hideNavigationBarLoading();
			uni.stopPullDownRefresh();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			this.page++;
			this.orderList()
		},
		methods: {
			serbtn() {
				this.page = 0;
				this.orderList()
			},
			onClose() {
				this.show1 = false
			},
			// 支付接口
			OrderOrderPay(id, idx) {
				var that = this;
				uni.showLoading({
					title: '调起中...'
				});
				app.globalData.api.request('User/orderPayByOrderId', {
					shop_id: this.list[idx].shop_id,
					ids: id
				}, 'POST', 'form').then((res) => {
					if (res.code == 0) {
						var data = res.data
						var timeStamp = (Date.parse(new Date()) / 1000).toString();
						var pkg = data.package;
						var nonceStr = data.nonceStr;
						uni.requestPayment({
							timeStamp: data.timeStamp,
							nonceStr: nonceStr,
							package: pkg,
							signType: 'MD5',
							paySign: data.paySign,
							success: function(res) {
								////////console.log(res)
								uni.hideLoading();
								uni.showModal({
									title: '',
									content: '支付成功！',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											if (that.cur == 0) {
												that.list[idx].status = 2
											} else {
												that.list.splice(idx, 1)
											}
										} else {}
									}
								});
							},
							fail() {
								uni.hideLoading();
							}
						});
					} else {
						app.globalData.show(res.msg)
					}
				});
			},
			// 取消退款
			orderChancelRefund(idx, id) {
				app.globalData.api.request('User/orderChancelRefund', {
					id: id,
				}, 'POST', 'form').then((res) => {
					if (res.code == 0) {
						if (this.cur == 0) {
							app.globalData.show('取消退款成功~')
							this.list[idx].refund_status = 0
						} else {
							this.list.splice(idx, 1)
						}
					} else {
						app.globalData.show(res.msg)
					}
				});
			},
			// 取消订单
			orderChancel(idx, id) {
				app.globalData.api.request('User/orderChancel', {
					id: id,
				}, 'POST', 'form').then((res) => {
					if (res.code == 0) {
						if (this.cur == 0) {
							app.globalData.show('取消成功~')
							this.list[idx].status = 4
						} else {
							this.list.splice(idx, 1)
						}
					} else {
						app.globalData.show(res.msg)
					}
				});
			},
			// 订单列表
			orderList() {
				app.globalData.api.request('Shop/orderList', {
					like: this.like,
					status: this.cur,
					page: this.page
				}, 'POST', 'form').then((res) => {
					if (res.code == 0) {
						//console.log(res)
						this.list = this.page > 0 ? this.list.concat(res.data) : res.data;
						this.more = res.data.length == 0 ? 1 : 0;
					} else {
						app.globalData.show(res.msg)
					}
				});
			},
			jump(url) {
				//console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			swidths(e) {
				this.cur = e;
				this.page = 0;
				this.orderList()
			},
		}
	};
</script>
<style lang="scss">
	.cplist>view>view>view:nth-child(3) {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.cplist>view>view>view:nth-child(3)>view:nth-child(1) {
		color: rgba(217, 104, 142, 1);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.cplist>view>view>view:nth-child(3)>view:nth-child(2) {
		color: rgba(209, 209, 209, 1);
		font-size: 24rpx;
		text-align: right;
		font-family: PingFangSC-regular;
	}

	.cplist>view>view {
		width: 100%;
		min-height: 160rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.cplist>view>view>view {
		width: 100%;
		height: auto;
		display: table;
	}

	.cplist>view>view>view:nth-child(1) {
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		text-align: left;
		font-weight: 400;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}

	.cplist>view>view>view:nth-child(2) {
		color: rgba(209, 209, 209, 1);
		font-size: 28rpx;
		text-align: left;
		margin-top: 10rpx;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}

	.cplist>view>view>view:nth-child(2)>span {
		font-size: 24rpx !important;
	}

	.zrimg {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 20rpx;
		left: 0rpx;
	}

	.cplist {
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
	}

	.cplist>view {
		width: 100%;
		min-height: 200rpx;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		padding-left: 180rpx;
		position: relative;
	}

	.secon {
		width: 690rpx;
		margin: 20rpx 30rpx;
		height: 40px;
		box-sizing: border-box;
		background-color: rgba(244, 246, 250, 1);
		border-radius: 10rpx;
		padding: 0px 0rpx;
		position: relative;
		display: flex;
		margin-bottom: 5px;
		padding-left: 60rpx;

		image {
			width: 35rpx;
			height: auto;
			margin-right: 10rpx;
			position: absolute;
			left: 20rpx;
			top: 50%;
			margin-top: -17.5rpx;
		}

		input {
			width: 100%;
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			font-family: PingFangSC-regular;
			height: 40px;
			box-sizing: border-box;
			padding-left: 10px;
		}
	}

	.btns {
		width: 100%;
		height: 94rpx;
		background: #FADD43;
		border-radius: 8rpx;
		text-align: center;
		line-height: 94rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-top: 30px;
	}

	.txt22>view {
		width: auto;
		height: auto;
		display: table;
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #A5ABB7;
	}

	.txt22>textarea {
		width: 100%;
		height: 210rpx;
		box-sizing: border-box;
		display: table;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #222;
		line-height: 40rpx;
	}

	.txt22 {
		width: 100%;
		height: 250rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.daycons {
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 96rpx 58rpx 30rpx 58rpx;
	}

	.btn2 {
		width: auto;
		padding: 0px 30rpx;
		height: 60rpx;
		border: 2rpx solid #8665AF;
		box-sizing: border-box;
		border-radius: 5px;
		text-align: center;
		line-height: 56rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #8665AF;
		margin-left: 12px;
		float: left;
	}

	.btn1 {
		width: auto;
		padding: 0px 30rpx;
		height: 60rpx;
		background: #8665AF;
		border-radius: 5px;
		text-align: center;
		line-height: 60rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #fff;
		margin-left: 12px;
		float: left;
	}

	.forbtn>view {
		width: auto;
		display: table;
		float: right;
		height: auto;
		box-sizing: border-box;
	}

	.forbtn {
		width: 100%;
		height: auto;
		display: table;
		z-index: 10;
		margin-bottom: 10rpx;
	}

	.txt3>view:nth-child(1) {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 26rpx;
		color: #707070;
	}

	.txt3>view:nth-child(2) {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 26rpx;
		color: #707070;
		margin-top: 3px;
	}

	.txt3>view:nth-child(2)>span {
		color: #FF2A2A !important;
	}

	.txt3>view {
		width: 100%;
		height: auto;
	}

	.txt2>view:nth-child(2) {
		width: 30%;
		height: 40px;
		display: table;
		float: right;
		line-height: 40px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 350;
		font-size: 28rpx;
		color: #8665AF;
		text-align: right;
	}

	.txt2>view:nth-child(1) {
		width: 70%;
		height: auto;
		display: inline-flex;
		align-items: center;
		float: left;
		line-height: 20px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		padding: 10px 0px;
	}

	.txt2>view:nth-child(1)>image {
		width: 30rpx;
	}

	.txt2 {
		width: 100%;
		height: auto;
		display: table;
		// border-bottom: 1px solid #D8D8D8;
	}

	.list {
		width: 686rpx;
		height: auto;
		display: table;
		margin-left: 32rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding: 0px 20rpx;
		background-color: #fff;
		padding-bottom: 10rpx;
		border-radius:10rpx;
	}

	.actives {
		font-weight: bold !important;
		color: #8665AF !important;
	}

	.actives::before {
		content: '';
		width: 80rpx;
		height: 4rpx;
		background: #8665AF;
		border-radius: 4rpx 4rpx 0rpx 0rpx;
		position: absolute;
		left: 50%;
		bottom: 3px;
		margin-left: -40rpx;
	}

	.txt1>span {
		position: relative;
		display: inline-block;
	}

	.txt1 {
		width: 20%;
		height: 40px;
		display: inline-block;
		box-sizing: border-box;
		padding: 0px 20px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #333;
		line-height: 40px;
	}

	.navtap {
		width: 100%;
		height: 40px;
		display: inline-flex;
		background-color: #fff;
		white-space: nowrap;

	}

	.back>image {
		width: 9px;
		height: auto;
		display: table;
	}

	.back {
		width: 45px;
		height: 45px;
		position: absolute;
		top: 0px;
		left: 0px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.txt {
		width: 100%;
		height: 45px;
		display: table;
		position: relative;
		text-align: center;
		line-height: 45px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 36rpx;
		color: #1A1A1A;
	}

	.navtop {
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
	}

	.content {
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
	}

	.bottombtn {
		background: #8665AF;
		border-radius: 10rpx;
		color: #fff;
		position: fixed;
		bottom: 30rpx;
		right: 30rpx;
		left: 30rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	page {
		background: #f6f6f6;
		padding-bottom: 100rpx;
	}
</style>